<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">课程列表信息</b>
              </div>
            </el-col>
          </el-row>
          <div style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-table
              v-loading="loading"
              :data="courseForm"
              border
              style="width: 100%">
              <el-table-column
                prop="courseName"
                label="课程名称"
                >
              </el-table-column>
              <el-table-column
                prop="credit"
                label="课程学分"
                >
              </el-table-column>
              <el-table-column
                prop="classroomName"
                label="所属班级"
                >
              </el-table-column>
              <el-table-column
                label="操作"
                >
                <template slot-scope="scope">
                  <el-button type="primary" size="small" icon="el-icon-edit" @click="openEditCourse(scope.$index, scope.row)"></el-button>
                  <el-tooltip class="item" effect="dark" content="此操作将永久删除此课程信息，请谨慎操作！！" placement="top">
                    <el-button type="success" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--分页组件-->
          <div class="block" align="center">
            <el-pagination
              class="pagination"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 删除班级确认框-->
          <div>
            <el-dialog
              icon="warning"
              title="提示"
              :visible.sync="dialogVisible"
              width="27%"
              :before-close="handleClose">
              <span> <i class="el-icon-delete-solid"></i> &nbsp;&nbsp;&nbsp;再次确定永久删除此课程吗？？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDeleteCourse">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <!--编辑班级信息-->
          <div>
            <el-dialog title="编辑课程信息" :visible.sync="dialogFormVisible">
              <el-form :model="editCourse">
                <el-form-item label="课程名称" label-width="100px">
                  <el-input :readonly="readonly" v-model="editCourse.courseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程学分" label-width="100px">
                  <el-slider
                    v-model="editCourse.credit"
                    :max="max"
                    :min="min"
                    show-input>
                  </el-slider>
                </el-form-item>
                <el-form-item label="所属班级" label-width="100px">
                  <el-select clearable :readonly="readonly" v-model="editCourse.classroomName" placeholder="请选择班级">
                    <el-option
                      v-for="item in options"
                      :key="item.classroomName"
                      :label="item.classroomName"
                      :value="item.classroomName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="uploadCourse">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'teacherClassList',
  data () {
    return {
      readonly: true,
      max: 6,
      min: 2,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      options: [{
        classroomName: ''
      }],
      courseForm: [{
        courseName: '',
        classroomName: '',
        credit: 4
      }],
      deleteCourse: [],
      teacherId: '',
      loading: false,
      dialogVisible: false,
      dialogFormVisible: false,
      editCourse: []
    }
  },
  created () {
    this.getTeacherId()
    this.loading = true
    this.getAllCourse()
  },
  mounted () {
    this.getAllClassroomNames()
  },
  methods: {
    handleSizeChange (pageSize) {
      this.pagination.pageSize = pageSize
      this.getAllCourse()
    },
    handleCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.getAllCourse()
    },
    // 获取教师id
    getTeacherId () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
    },
    // 编辑课程信息
    handleEdit (index, row) {
      this.dialogFormVisible = true
      this.editClassroom = row
    },
    // 删除课程信息
    handleDelete (index, row) {
      this.dialogVisible = true
      this.deleteCourse = row
    },
    // 获取当前老师的所有班级的班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.options = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取所有课程信息
    getAllCourse () {
      this.loading = true
      this.$axios.post('http://localhost:8888/teacherGetCourseByPage/' + this.pagination.currentPage + '/' +
        this.pagination.pageSize + '/' + this.teacherId)
        .then(res => {
          if (res.data.flag) {
            this.loading = false
            this.$message({
              message: '恭喜你，课程信息获取成功',
              type: 'success'
            })
            this.courseForm = res.data.data.courseOV
            this.pagination.total = res.data.data.total
            this.pagination.currentPage = res.data.data.currentPage
            this.pagination.pageSize = res.data.data.pageSize
          } else {
            this.$message.error('很抱歉，课程信息获取失败啦')
          }
        }).catch(err => {
          this.loading = true
          return Promise.reject(err)
        })
    },
    // 打开编辑课程弹窗
    openEditCourse (index, value) {
      this.dialogFormVisible = true
      this.editCourse = value
    },
    // 编辑课程信息
    uploadCourse () {
      this.dialogFormVisible = false
      this.$axios.post('http://localhost:8888/teacherUploadCourse/' + this.teacherId, this.editCourse).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，编辑课程信息成功',
            type: 'success'
          })
          this.getAllCourse()
        } else {
          this.$message.error('很抱歉，编辑课程信息失败啦')
        }
      }).catch((err) => {
        return Promise.reject(err)
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 删除课程
    doDeleteCourse () {
      this.dialogVisible = false
      this.$axios.post('http://localhost:8888/teacherDeleteCourse/' + this.teacherId, this.deleteCourse).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，课程删除成功',
            type: 'success'
          })
          this.getAllCourse()
        } else {
          this.$message.error('很抱歉，课程删除失败啦')
        }
      }).catch((err) => {
        return Promise.reject(err)
      })
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>

<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
